<template>
  <WidgetContainer
      :data="data"
      :context-menu="contextMenu"
      drag-anchor
  >
    <q-card class="q-pa-sm column full-height">
      <div v-if="widgetData.title" class="widget-header text-h6 ellipsis relative-position">
        <q-btn flat dense icon="text_fields"></q-btn>
        <span>{{ widgetData.title }}</span>
      </div>
      <q-icon></q-icon>
      <div class="col scroll hide-scrollbar full-width">
        <iframe ref="page" class="widget-iframe" :srcdoc="widgetData.htmlCode"></iframe>
      </div>
    </q-card>
    <CustomWidgetEditForm
        v-model="formData"
        v-model:show="formShow"
        mode="update"
    ></CustomWidgetEditForm>
  </WidgetContainer>
</template>

<script>
import WidgetContainer from 'src/pages/workbench/components/WidgetContainer'
import widget from '../../../mixins/widget'
import CustomWidgetEditForm from './management/CustomWidgetEditForm'

export default {
  name: 'CustomWidget',
  mixins: [widget],
  components: {
    WidgetContainer,
    CustomWidgetEditForm
  },
  props: {
    data: Object
  },
  data () {
    return {}
  },
  watch: {
    widgetData () {
      this.refresh()
    }
  },
  mounted () {
    this.refresh()
  },
  methods: {
    refresh () {
      // this.$refs.page.html(this.widgetData.htmlCode)
    }
  }
}
</script>

<style lang="scss">

</style>
